<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="request"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>chunku</title>

<link rel="stylesheet" href="${ctx}/resources/uploader/webuploader.css">
<link rel="stylesheet" href="${ctx}/resources/uploader/font-awesome.min.css">
<script src="${ctx}/resources/js/jquery.js"></script>
<script src="${ctx}/resources/uploader/webuploader.min.js"></script>
</head>
<body>
	<div id="uploader" class="wu-example">
	<h3 class="wu-h">大文件上传</h3>
		<!--用来存放文件信息-->
		<div id="thelist" class="uploader-list"></div>
		<div class="btns">
			<div id="picker"><span class="fa fa-upload"></span>选择文件</div>
			<div class="btn-box"><button id="ctlBtn" class="btn btn-default" onclick="start()">开始上传</button></div>
		</div>
	</div>
	<script type="text/javascript">
		var BASE_URL = '${ctx}';
		var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader;
		var fileMd5;
		var fileName;
		//监听分块上传过程中的三个时间点
		WebUploader.Uploader.register({
			"before-send-file" : "beforeSendFile",
			"before-send" : "beforeSend",
			"after-send-file" : "afterSendFile",
		}, {
			//时间点1：所有分块进行上传之前调用此函数
			beforeSendFile : function(file) {
				var deferred = WebUploader.Deferred();
				fileName = file.name;
				//1、计算文件的唯一标记，用于断点续传
				(new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024)
						.progress(function(percentage) {
							$list.find("p.notice").text("正在读取文件信息...");
						}).then(function(val) {
							fileMd5 = val;
							$list.find("p.notice").text("成功获取文件信息...");
							//获取文件信息后进入下一步
							deferred.resolve();
						});
				return deferred.promise();
			},
			//时间点2：如果有分块上传，则每个分块上传之前调用此函数
			beforeSend : function(block) {
				var deferred = WebUploader.Deferred();

				$.ajax({
					type : "POST",
					url : BASE_URL + "/chunkCheckAndMerge?action=checkChunk",
					data : {
						//文件唯一标记
						fileMd5 : fileMd5,
						//当前分块下标
						chunk : block.chunk,
						//当前分块大小
						chunkSize : block.end - block.start
					},
					dataType : "json",
					success : function(response) {
						if (response.ifExist) {
							//分块存在，跳过
							deferred.reject();
						} else {
							//分块不存在或不完整，重新发送该分块内容
							deferred.resolve();
						}
					}
				});

				this.owner.options.formData.fileMd5 = fileMd5;
				deferred.resolve();
				return deferred.promise();
			},
			//时间点3：所有分块上传成功后调用此函数
			afterSendFile : function() {
				//如果分块上传成功，则通知后台合并分块
				$.ajax({
					type : "POST",
					url : BASE_URL + "/chunkCheckAndMerge?action=mergeChunks",
					data : {
						fileMd5 : fileMd5,
						fileName : fileName
					},
					success : function(response) {
						$(".notice").text("上传成功")
					}
				});
			}
		});

		var uploader = WebUploader.create({
			// swf文件路径
			swf : BASE_URL
					+ '/resources/uploader/webuploader-0.1.5/Uploader.swf',
			// 文件接收服务端。
			server : BASE_URL + '/chunkUpload',
			// 选择文件的按钮。可选。
			// 内部根据当前运行是创建，可能是input元素，也可能是flash.
			pick : {
				id : '#picker', //这个id是你要点击上传文件的id，自己设置就好
				multiple : false
			},
			// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
			resize : true,
			auto : false,
			//开启分片上传
			chunked : true,
			chunkSize : 10 * 1024 * 1024,
		});

		// 当有文件被添加进队列的时候
		uploader.on('fileQueued', function(file) {
			console.log(uploader.getFiles().length);
			$list.empty();
			$list.html('<div id="' + file.id + '" class="item">'
					+ '<p class="info">' + file.name + '</p>'
					+'<p class="notice">等待上传...</p>'
					+ '<div class="jdt"><p class="state"></p></div></div>');
		});
		

		// 文件上传过程中创建进度条实时显示。
		uploader.on('uploadProgress', function(file, percentage) {
			$list.find('p.state').text(
					 + Math.round(percentage * 100) + '%');
			$(".state").css("width", Math.round(percentage * 100)+ '%')
			
			});
		
		
		// 文件添加队列之前
		uploader.on('beforeFileQueued', function(file, percentage) {
			uploader.reset();
		});
		
		uploader.on('uploadSuccess', function(file) {
			uploader.removeFile(file);
			$('#' + file.id).find('p.info').append('<span class="fa fa-check-circle "></span>');
			$btn.attr("onclick", "start()");
			$btn.text("开始上传");
		});

		uploader.on('uploadError', function(file) {
			$('#' + file.id).find('p.state').text('上传出错');
		});

		uploader.on('uploadComplete', function(file) {
			$('#' + file.id).find('.progress').fadeOut();
		});

		function start() {
			uploader.upload();
			$btn.attr("onclick", "stop()");
			$btn.text("取消上传");
		}

		function stop() {
			uploader.stop(true);
			$btn.attr("onclick", "start()");
			$btn.text("继续上传");
		}
	</script>
</body>
</html>